<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div v-show="!info.isYh">{{info.ids==14?"巡查排查":"宣传部署"}}</div>
        <div v-show="info.isYh">隐患整治</div>
      </div>
    </header>
    <div class="contant" v-if="Result !== ''">
      <div class="bg-clr">
        <div class="list-box">
          <span class="dian">{{ data.lev1mc }}-</span>
          <span class="yhd">{{ data.lev2mc }}</span>
        </div>
        <div class="list-box" v-if="dataText !== '' || data.status !== 0">
          <img v-if="(data.yhlb === 1 || data.yhlb === 2 || data.yhlb === 99) && data.status !== 0" style="width: 13px"
            :src="isRectificas">
          <div v-else>
            <img v-if="data.yhlb === 1 || data.yhlb === 2 || data.yhlb === 99" style="width: 13px" :src="isRectifica">
          </div>
          <div>
            <span v-if="data.yhlb !== 0" style="margin-right: 30px">隐患</span>
            <span v-if="dataText !== ''">{{ dataText.replace(/、/g, ' ') }}</span>
          </div>
        </div>
      </div>
      <div class="yh-box" v-if="data != null">
        <div class="bg-clr">
          <div ref="content" class="list1" :class="listHeight > 48 ? 'list1-sapn' : ''"
            v-if="data.title!='' && data.title!='undefined'">
            {{data.title}}
          </div>
          <div class="list" v-if="data.contract !='' ">
            <div class="yy" @click="y_play(data.contract,$event)">
              <img src="../../../assets/images/play.png" class="img_yuyin" />
              <span class="ly_s">{{ data.contractime }}</span>
            </div>
          </div>
          <div class="lists lists1" v-if="data.imgurl !== null || datas.videourl !== null">
            <ul class="lists imgs_ul" v-if="data.imgurl !== '' && data.imgurl !== null">
              <li class="img-box" v-for="(items, indexs) in data.imgurl.split('|')" :key="indexs">
                <div class="img-box-item">
                  <img :src="name + items.substring(0, items.indexOf('^'))" alt="" class="imgs">
                </div>
                <div class="imgtext">{{ items.substring(items.indexOf('^') + 1, items.length - 2)}}</div>
              </li>
            </ul>
            <ul class="video-box" v-if="data.videourl !== '' && data.videourl !== null">
              <li class="video-list" v-for="(obj,i) of data.videourl.split(',')" :key="i">
                <video controls>
                  <source :src="name + obj" type="video/mp4">
                  <source :src="name + obj" type="video/ogg">
                  您的浏览器不支持Video标签。
                </video>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="list bg-clr">
        <div class="dians" style="width: auto;">{{ data.dwmc }}
          <div class="dians-sq">{{ data.userName }}</div>
          <div class="dians-box">
            <img src="../../../assets/images/tabbar_user.png" alt="" class="dian-imgs">
            <span>{{ data.persons }}</span>
          </div>
        </div>
        <div class="list_two" v-if="data.addtime.indexOf('.') !== -1">
          {{ data.addtime.replace(/T/g, ' ').substring(0, data.addtime.indexOf('.')) }}
        </div>
        <div class="list_two" v-else>{{ data.addtime.replace(/T/g, ' ') }}</div>
      </div>
      <div v-if="datas !== null">
        <div class="yh-box">
          <div class="bg-clr">
            <div class="list-box">
              <img style="width: 13px" src="../../../assets/images/sx.png">
              <div>{{ datas.title }}</div>
            </div>
            <div class="list" v-if="datas.contract !='' ">
              <div class="yy" @click="y_play(datas.contract,$event)">
                <img src="../../../assets/images/play.png" class="img_yuyin" />
                <span class="ly_s">{{ datas.contractime }}</span>
              </div>
            </div>
            <div class="lists lists1"
              v-if="(datas.imgurl !== '' && datas.imgurl !== null) || (datas.videourl !== '' && datas.videourl !== null)">
              <ul class="lists imgs_ul" v-if="datas.imgurl !== '' && datas.imgurl !== null">
                <li class="img-box" v-for="(items, indexs) in datas.imgurl.split('|')" :key="indexs">
                  <div class="img-box-item">
                    <img :src="name + items.substring(0, items.indexOf('^'))" alt="" class="imgs">
                  </div>
                  <div class="imgtext">{{ items.substring(items.indexOf('^') + 1, items.length - 2)}}</div>
                </li>
              </ul>
              <!--              <ul class="video-box" v-if="datas.videourl !== '' && datas.videourl !== null">-->
              <!--                <li class="video-list" v-for="(obj,i) of datas.videourl.split(',')" :key="i">-->
              <!--                  <video controls>-->
              <!--                    <source :src="name + obj" type="video/mp4">-->
              <!--                    <source :src="name + obj" type="video/ogg">-->
              <!--                    您的浏览器不支持Video标签。-->
              <!--                  </video>-->
              <!--                </li>-->
              <!--              </ul>-->
            </div>
          </div>
        </div>
        <div class="list bg-clr">
          <div class="dians" style="width: auto;">{{ datas.dwmc }}
            <div class="dians-sq">{{ datas.username }}</div>
            <div class="dians-box">
              <img src="../../../assets/images/tabbar_user.png" alt="" class="dian-imgs">
              <span>{{ datas.persons }}</span>
            </div>
          </div>
          <div class="list_two">{{ datas.addtime.replace(/T/g, ' ').substring(0, datas.addtime.indexOf('.')) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import "../../../assets/js/zoom";
  import qs from 'qs';
  export default {
    name: "hard_detail_ordinary",
    data() {
      return {
        isRectifica: require('../../../assets/images/jsd.gif'),
        isRectificas: require('../../../assets/images/lg.png'),
        patrolTroubleshootId: 0,
        info: {},
        userId: null,
        data: {
          imgurl: '',
          videourl: '',
          addtime: '',
          imgText: ''
        },
        datas: {
          imgurl: '',
          videourl: '',
          addtime: '',
          imgText: ''
        },
        dataYh: [],
        qi_name: "",//区人名
        jie_name: "",//街道人名
        she_name: "",//社区人名
        name: '',
        judgmentShow: true,
        leadership: '',
        leaderships: '',
        p: null,
        dataList: {},
        play_code: 1,
        dataText: '',
        listHeight: 0,
        Result: ''
      };
    },
    destroyed() {
      setTimeout(() => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    methods: {
      stopPlay() {
        if (this.p) {
          this.p.stop();
        }
        this.play_code = 1;
        $('.img_yuyin').attr("src", require('../../../assets/images/play.png'));
        this.$forceUpdate();
      },
      back() {
        this.stopPlay();
        this.$router.back();
      },
      y_play(yy_path, e) {
        var _this = this;
        var dom = $(e.currentTarget).find(".img_yuyin")

        if (_this.play_code == 1) {
          _this.p = null;
          console.log(_this.name + yy_path);
          _this.p = plus.audio.createPlayer(_this.name + yy_path);
          $(dom).attr("src", require('../../../assets/images/play_dt.gif'))
          console.log("进入播放");
          _this.play_code = 2;
          // localStorage.setItem('domPlay', JSON.stringify(dom));
          // localStorage.setItem('domPlayString', yy_path);
          console.log(JSON.stringify(_this.p))
          _this.p.play(() => {
            //播放完毕
            _this.play_code = 1;
            $(dom).attr("src", require('../../../assets/images/play.png'));
            _this.p.stop();
          },
            function (e) {
              _this.play_code = 1;
              $(dom).attr("src", require('../../../assets/images/play.png'));
              _this.p.stop();
              alert("Audio play error: " + e.message);
              _this.$router.go(0);
            });
        } else {
          _this.p.pause();
          _this.play_code = 1;
          $(dom).attr("src", require('../../../assets/images/play.png'))
        }
      },
      querys(data) {
        let a = [];
        let b = [];
        if (data.NoweInfo.length >= 1) {
          data.NoweInfo.map(res => {
            if (res.yhlb === 0) {
              this.datas = res
              if (res.contract === '' && res.contractime === ''
                && res.imgText === '' && res.imgurl === ''
                && res.name === '' && res.ptiName === ''
                && res.title === '' && res.videourl === '') {
                this.judgmentShow = false;
              }
            } else {
              b.push(res);
              this.dataYh = b;
              this.judgmentShow = false;
            }
          })
        } else {
          this.judgmentShow = false;
        }
        console.log(this.datas)
        data.person.map(res => {
          if (res.lev === 1) {
            a.push(res.name)
            this.leadership = a.toString()
          }
          if (res.lev === 2) {
            a.push(res.name)
            this.leaderships = a.toString()
          }
        })
      },
      query() {
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        let data = {
          Type: 'GetNowe_infoItemByID',
          id: this.info.id,
          jgid: this.info.ids
        }
        this.axios.post(`${this.name}/View/HomeHandler.ashx`,
          qs.stringify(data)).then(res => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log('plus问题');
            }
            console.log(res);
            if (res.status === 200) {
              this.data = res.data.Data[0];
              this.dataText = res.data.jgmxtext;
              this.Result = res.data.Result;
              if (res.data.Nowe_info_chuzhi === null) {
                this.datas = null;
              } else {
                this.datas = res.data.Nowe_info_chuzhi[0];
              }
            }
          }).catch(error => {
            this.$terminal._error(error)
          });;
      }
    },
    mounted() {
      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
    },
    watch: {
      //dataList的值改变后会执行
      data(newData, oldData) {
        this.$nextTick(() => {
          let a = document.getElementsByClassName('list1')[0]
          if (a !== undefined) {
            this.listHeight = a.offsetHeight;
          }
        })
      }
    },
    created() {
      var that = this;
      //切换后台
      document.addEventListener("pause", function () {
        that.stopPlay();
      }, false);
      that.name = that.$global_msg.Url.jd_url;
      that.info = that.$route.query;
      that.query();
    }
  };
</script>
<style scoped>
  .dian {
    word-break: keep-all;
  }

  .list-boxs {
    display: flex;
    align-items: center;
    white-space: normal;
  }

  .men-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .list-box {
    display: flex;
    align-items: center;
    border-bottom: 1Px solid #ddd;
    padding: 0.4352rem 0.4rem;
    white-space: normal;
  }

  .list1-sapn {
    text-indent: 2em
  }

  .yh-box {
    background-color: #f2f2f2
  }

  .bg-clr {
    background-color: #ffffff
  }

  .dian-imgs {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .imgtext {
    word-break: break-word;
  }

  .img-box-item {
    width: 4.381481rem;
    height: 2.814814rem;
    border: 1px #ddd solid;
    border-radius: 0.277778rem;
  }

  .video-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%
  }

  /* 视频列表 */
  .video-list {
    padding-top: 0.259259rem;
    margin-bottom: 0.37037rem;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    border-top: 1px #DDDDDD solid;
  }

  .video-list video {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }

  .video-list video:first-child {
    margin-top: 0;
  }

  .video-list .del {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }

  .list1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1Px solid #ddd;

    padding: 0.3704rem 0.4rem;
  }

  .dian {
    word-break: keep-all;
  }

  .dians {
    display: flex;
    justify-content: center;
  }

  .dians-sq {
    margin-left: 40px;
    margin-right: 10px;
  }

  .dians-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909090;
  }

  .imgs_ul {
    padding: 0 0.4rem;
    width: 100%;
    padding-bottom: 0.2rem;
  }

  .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .lists1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1Px solid #ddd;
  }

  .lists1:first-child {
    border-bottom: none;
  }

  .img-box {
    width: 4.381481rem;
    /* height: 2.814814rem; */
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: flex;

    border-radius: 30px;
    margin-top: 0.2rem;
    flex-wrap: wrap;
  }

  .imgs {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .yy img {
    margin: 0 0.2rem;
    width: 0.4rem;
  }

  .yy {
    width: 2.3rem;
    height: 0.8rem;
    border: 1Px solid #ddd;
    display: flex;
    border-radius: 0.2rem;
    align-items: center;
  }

  .list_two {
    color: #909090;

  }

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1Px solid #ddd;
    /* height: 1.3rem; */
    padding: 0.4352rem 0.4rem;
  }

  .contant {
    margin-top: 1.8519rem;
    /* border: 1px solid white; */
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
</style>
